<template>
  <div class="main">
    <all-header :title="$route.meta.title"></all-header>
    <div class="con">
      <div class="top">
        <h1>订单票据</h1>
        <div class="time"></div>
      </div>
      <div class="text">
        <div class="item">
          <div class="left">作品名称</div>
          <div class="right">{{ orderDetail.name }}</div>
        </div>
        <div class="item">
          <div class="left">订单金额</div>
          <div class="right">{{ orderDetail.amount }}</div>
        </div>
        <div class="item">
          <div class="left">购买数量</div>
          <div class="right">{{ orderDetail.buy_num }}</div>
        </div>
        <div class="item">
          <div class="left">订单时间</div>
          <div class="right">{{ orderDetail.created_at }}</div>
        </div>
        <div class="item">
          <div class="left">订单号</div>
          <div class="right">{{ orderDetail.order_id }}</div>
        </div>
        <div class="item">
          <div class="left">订单状态</div>
          <div class="right">{{orderDetail.status == 0?'付款中':orderDetail.status == 1?'付款成功':orderDetail.status == 2?'付款失败':orderDetail.status == 4?'订单取消':'订单超时'}}</div>
        </div>
      </div>
      <div class="bottom" v-if="orderDetail.status==0">
        <div class="bottom-right">  
          <van-button type="primary">取消订单</van-button>
          <van-button type="default">继续支付</van-button>
        </div>
    </div>
  </div>
</div>
</template>

<script setup>
import { ref } from "@vue/reactivity";
import { useRoute } from "vue-router";
import rechargeStore from "../../store/recharge";

let orderDetail = ref("");
const route = useRoute();
const orderID = route.params.id;
const recharge = rechargeStore();
const getOrderDetail = () => {
  recharge.getOrderDetail({ order_id: orderID }).then((res) => {
    orderDetail.value = res;
  });
};

const onload = () => {
  getOrderDetail();
};

onload();
</script>

<style lang="scss" scoped>
.main {
  padding-top: 1.3462rem;
}
.con {
  padding: 0.3846rem;
  width: 77%;
  border-radius: 0.3846rem;
  box-shadow: 0.0962rem 0.0962rem 0.3846rem 0.1923rem #f3f5f6;
  position: absolute;
  transform: translateX(-50%);
  left: 50%;

  .top {
    h1 {
      font-size: 25px;
    }
  }

  .text {
    padding-bottom: 0.3846rem;
    padding-top: 0.3846rem;
    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 0.3846rem;

      .left {
        font-weight: bold;
        font-size: 0.2885rem;
        color: #959595;
      }
      .right {
        font-weight: bold;
        font-size: 0.25rem;
      }
    }
  }

  .bottom {
    display: flex;
    justify-content: end;
    padding-top: 0.3846rem;
    
    .van-button--default {
      background: black;
      color: black;
      border: solid 0.0192rem black;
      color: white;
      border-radius: 0.1923rem;
      margin-left: 0.1923rem;
    }

    .van-button--primary {
      background: white;
      border-radius: 0.1923rem;
      color: black;
      border: solid .0192rem black;
    }
  }
}
</style>